<template>
  <section 
    id="services" 
    class="py-24 bg-white"
    :style="{
      '--primary-color': primaryColor,
      '--secondary-color': secondaryColor
    }"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 -->
      <div class="text-center max-w-3xl mx-auto mb-16">
        <span class="text-primary font-medium">我们的服务</span>
        <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mt-2 mb-4">为您的企业提供全方位支持</h2>
        <p class="text-gray-600 text-lg leading-relaxed">我们提供从战略咨询到技术实施的一站式服务，满足企业不同阶段的发展需求</p>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="isLoading" class="flex flex-col items-center justify-center py-16 bg-white rounded-xl shadow-sm">
        <div class="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin mb-4"></div>
        <p class="text-gray-600">正在加载服务信息...</p>
      </div>

      <!-- 服务展示 -->
      <div v-else :class="gridClass">
        <div 
          v-for="(service, index) in services" 
          :key="index" 
          class="bg-gray-50 rounded-xl p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl cursor-pointer"
          @click="handleServiceClick(service)"
          :style="cardStyle"
        >
          <div 
            class="w-14 h-14 rounded-lg flex items-center justify-center mb-6"
            :style="getServiceIconBgStyle(service)"
          >
            <i :class="['fa', service.icon, 'text-2xl text-primary']"></i>
          </div>
          <h3 class="text-xl font-bold mb-3">{{ service.title }}</h3>
          <p class="text-gray-600 mb-6">{{ service.description }}</p>
          
          <ul class="space-y-2 mb-6" v-if="service.features && service.features.length">
            <li 
              v-for="(feature, fIndex) in service.features" 
              :key="fIndex" 
              class="flex items-center text-sm text-gray-600"
            >
              <i class="fa fa-check text-green-500 mr-2"></i>
              {{ feature }}
            </li>
          </ul>
          
          <a 
            href="#" 
            class="text-primary font-medium inline-flex items-center hover:underline"
            @click.stop="handleDetailClick(service, $event)"
          >
            了解更多
            <i class="fa fa-long-arrow-right ml-2"></i>
          </a>
        </div>
      </div>
      
      <!-- 刷新按钮（仅在有数据源时显示） -->
      <div v-if="dataSourceUrl && !isLoading" class="flex justify-end mt-8">
        <button 
          @click="refreshData" 
          :style="{ backgroundColor: primaryColor }"
          class="px-4 py-2 text-white rounded-lg hover:opacity-90 transition-all duration-300 flex items-center"
          :disabled="isLoading">
          <i class="fa fa-refresh mr-2"></i>
          刷新服务信息
        </button>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ServiceShowcase',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'service-showcase',
      displayName: '服务展示',
      description: '展示公司提供的服务内容和优势的组件',
      icon: 'fa-gears',
      category: '内容展示',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'secondaryColor',
            label: '辅助色',
            type: 'color',
            defaultValue: '#36CFC9'
          },

          {
            name: 'showFeatures',
            label: '显示服务特性',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'services',
            label: '服务列表',
            type: 'array',
            defaultValue: []
          }
        ]
      },
      {
        title: '数据源配置',
        fields: [
          {
            name: 'dataSourceUrl',
            label: 'API数据源URL',
            type: 'text',
            description: 'API接口的地址',
            defaultValue: ''
          },
          {
            name: 'autoLoad',
            label: '自动加载',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '布局配置',
        fields: [
          {
            name: 'columnLayout',
            label: '列布局',
            type: 'select',
            options: [
              { label: '1列', value: '1' },
              { label: '2列', value: '2' },
              { label: '3列', value: '3' },
              { label: '自动适应', value: 'auto' }
            ],
            defaultValue: 'auto'
          },
          {
            name: 'cardRadius',
            label: '卡片圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          },
          {
            name: 'cardElevation',
            label: '卡片阴影强度',
            type: 'select',
            options: [
              { label: '无阴影', value: 'none' },
              { label: '轻微', value: 'light' },
              { label: '中等', value: 'medium' },
              { label: '强烈', value: 'strong' }
            ],
            defaultValue: 'medium'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'serviceClick',
        label: '服务卡片点击',
        description: '点击服务卡片时触发',
        parameters: [
          { name: 'service', type: 'object', description: '服务信息对象' }
        ]
      },
      {
        name: 'detailClick',
        label: '了解更多点击',
        description: '点击了解更多链接时触发',
        parameters: [
          { name: 'service', type: 'object', description: '服务信息对象' }
        ]
      },
      {
        name: 'dataLoaded',
        label: '数据加载完成',
        description: '从API数据源加载服务数据完成时触发',
        parameters: [
          { name: 'services', type: 'array', description: '加载的服务数据' }
        ]
      },
      {
        name: 'dataLoadError',
        label: '数据加载失败',
        description: '从API数据源加载服务数据失败时触发',
        parameters: [
          { name: 'error', type: 'object', description: '错误信息' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'filterServices',
        label: '筛选服务',
        description: '按服务类别筛选服务',
        parameters: [
          { name: 'category', type: 'string', required: false, description: '服务类别，为空显示全部' }
        ]
      },
      {
        name: 'refresh',
        label: '刷新服务数据',
        description: '重新加载服务数据'
      }
    ]
  },
  
  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    secondaryColor: {
      type: String,
      default: '#36CFC9'
    },
    children: {
      type: Array,
      default: () => []
    },
    // 数据源配置
    dataSourceUrl: {
      type: String,
      default: ''
    },
    autoLoad: {
      type: Boolean,
      default: true
    },
    // 布局配置
    columnLayout: {
      type: String,
      default: 'auto',
      validator: (value) => ['1', '2', '3', 'auto'].includes(value)
    },
    cardRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    cardElevation: {
      type: String,
      default: 'medium',
      validator: (value) => ['none', 'light', 'medium', 'strong'].includes(value)
    },
    showFeatures: {
      type: Boolean,
      default: true
    },
    
    // 服务数据
    services: {
      type: Array,
      default: () => [
        {
          id: 1,
          title: '数字化转型',
          description: '帮助企业实现全面数字化转型，优化业务流程，提升运营效率，降低成本。',
          icon: 'fa-laptop',
          category: 'transformation',
          features: [
            '业务流程数字化',
            '组织架构优化',
            '数字化人才培养'
          ],
          url: '#'
        },
        {
          id: 2,
          title: '云计算服务',
          description: '提供专业的云迁移和云管理服务，帮助企业构建灵活、安全、高效的云基础设施。',
          icon: 'fa-cloud',
          category: 'infrastructure',
          features: [
            '云平台搭建与迁移',
            '云资源管理与优化',
            '混合云解决方案'
          ],
          url: '#'
        },
        {
          id: 3,
          title: '数据分析',
          description: '通过先进的数据分析技术，帮助企业挖掘数据价值，实现数据驱动的决策。',
          icon: 'fa-line-chart',
          category: 'analytics',
          features: [
            '数据仓库建设',
            '商业智能分析',
            '预测分析模型'
          ],
          url: '#'
        },
        {
          id: 4,
          title: '网络安全',
          description: '提供全面的网络安全解决方案，保护企业数据和系统安全，防范网络威胁。',
          icon: 'fa-shield',
          category: 'security',
          features: [
            '安全评估与加固',
            '威胁检测与响应',
            '数据加密与隐私保护'
          ],
          url: '#'
        },
        {
          id: 5,
          title: 'IT咨询服务',
          description: '提供专业的IT战略咨询，帮助企业制定符合自身发展的IT规划和实施路线图。',
          icon: 'fa-cogs',
          category: 'consulting',
          features: [
            'IT战略规划',
            '技术选型咨询',
            'IT架构设计'
          ],
          url: '#'
        },
        {
          id: 6,
          title: '人工智能应用',
          description: '将人工智能技术应用于企业业务场景，提升自动化水平和决策能力。',
          icon: 'fa-robot',
          category: 'innovation',
          features: [
            '智能客服系统',
            '图像与语音识别',
            '智能流程自动化'
          ],
          url: '#'
        }
      ]
    },
    

    
    // 筛选类别
    activeCategory: {
      type: String,
      default: ''
    }
  },
  
  data() {
    return {
      // 内部活跃类别，优先使用props传入的值
      currentActiveCategory: this.activeCategory,
      // 加载状态
      isLoading: false,
      // 原始数据备份
      originalServices: [],
      // 内部服务数据副本，避免直接修改props
      localServices: []
    }
  },
  
  mounted() {
    // 保存原始数据，用于恢复
    this.originalServices = JSON.parse(JSON.stringify(this.services));
    this.localServices = [...this.services];
    
    // 自动加载数据
    if (this.autoLoad && this.dataSourceUrl) {
      this.loadDataFromSource();
    }
  },
  
  watch: {
    // 当services数据变化时，同步更新本地数据副本
    services: {
      handler(newVal) {
        this.originalServices = JSON.parse(JSON.stringify(newVal));
        this.localServices = [...newVal];
      },
      deep: true,
      immediate: true
    },
    
    // 当数据源URL变化时，重新加载数据
    dataSourceUrl(newUrl) {
      if (this.autoLoad && newUrl) {
        this.loadDataFromSource();
      }
    },
    
    // 监听外部传入的activeCategory变化
    activeCategory(newVal) {
      this.currentActiveCategory = newVal;
    }
  },
  
  computed: {
    // 筛选后的服务
    filteredServices() {
      if (!this.currentActiveCategory) {
        return this.localServices;
      }
      return this.localServices.filter(service => service.category === this.currentActiveCategory);
    },
    
    // 网格布局类名
    gridClass() {
      switch (this.columnLayout) {
        case '1':
          return 'grid grid-cols-1 gap-8';
        case '2':
          return 'grid grid-cols-1 md:grid-cols-2 gap-8';
        case '3':
          return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8';
        default: // auto
          return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8';
      }
    },
    
    // 卡片样式
    cardStyle() {
      let boxShadow = 'none';
      
      switch (this.cardElevation) {
        case 'light':
          boxShadow = '0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)';
          break;
        case 'medium':
          boxShadow = '0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1)';
          break;
        case 'strong':
          boxShadow = '0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)';
          break;
      }
      
      return {
        borderRadius: `${this.cardRadius}px`,
        boxShadow: boxShadow
      };
    }
  },
  
  watch: {
    // 监听外部传入的activeCategory变化
    activeCategory(newVal) {
      this.currentActiveCategory = newVal;
    },
    

  },
  
  methods: {
    /**
     * 从API数据源加载数据
     */
    async loadDataFromSource() {
      if (!this.dataSourceUrl) {
        this.$emit('dataLoadError', { message: '数据源URL不能为空' });
        return;
      }

      this.isLoading = true;
      
      try {
        const response = await fetch(this.dataSourceUrl, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        
        // 验证数据格式
        if (!Array.isArray(data)) {
          throw new Error('数据格式错误：返回的不是数组');
        }
        
        // 更新本地数据副本
        this.localServices = [...data];
        
        // 通知父组件更新props
        this.$emit('update:services', [...data]);
        
        this.$emit('dataLoaded', data);
      } catch (error) {
        console.error('加载服务数据失败:', error);
        this.$emit('dataLoadError', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    /**
     * 刷新数据
     */
    refreshData() {
      if (this.dataSourceUrl) {
        this.loadDataFromSource();
      }
    },
    

    
    /**
     * 获取服务图标背景样式
     */
    getServiceIconBgStyle(service) {
      // 支持服务自定义颜色，否则使用主题色
      const bgColor = service.bgColor 
        ? `${service.bgColor}20`  // 20%透明度
        : `${this.primaryColor}20`;
        
      return {
        backgroundColor: bgColor
      };
    },
    
    /**
     * 服务卡片点击事件
     */
    handleServiceClick(service) {
      this.$emit('serviceClick', service);
    },
    
    /**
     * 了解更多点击事件
     */
    handleDetailClick(service, e) {
      e.stopPropagation();
      this.$emit('detailClick', service);
      
      // 如果配置了链接且不是#，可以自动跳转
      if (service.url && service.url !== '#') {
        window.open(service.url, '_blank');
      }
    },
    
    /**
     * 筛选服务
     */
    filterServices(category) {
      this.currentActiveCategory = category;
      this.$emit('categoryChange', category);
    },
    
    /**
     * 刷新服务数据
     */
    refresh() {
      this.refreshData();
    }
  }
};
</script>

<style scoped>
/* 已替换为Tailwind CSS样式 */
</style>
    